import 'package:catguard/pages/home/home_logic.dart';
import 'package:catguard/views/common_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:line_awesome_flutter/line_awesome_flutter.dart';
import '../../../config/config.dart';
import '../../../generated/assets.dart';
import '../../../routers/routers.dart';

class FragmentHome extends StatelessWidget {
  FragmentHome({super.key});

  final logic = Get.find<HomeLogic>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Config.colorBg,
      resizeToAvoidBottomInset: false,
      body: SafeArea(
        child: Column(
          children: [
            //顶部栏
            Container(
              width: Get.width,
              padding: EdgeInsets.symmetric(horizontal: 35.w),
              height: 128.w,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  GestureDetector(
                    onTap: () {
                      popFamilyManager();
                    },
                    child: Row(
                      children: [
                        Text("Sam1的家庭",
                            style: TextStyle(
                                color: Config.colorText1,
                                fontSize: 40.sp,
                                fontWeight: FontWeight.bold)),
                        Icon(
                          Icons.arrow_drop_down_rounded,
                          size: 54.w,
                        )
                      ],
                    ),
                  ),
                  Row(
                    children: [
                      GestureDetector(
                        onTap: () {
                          Get.toNamed(Routes.msgCenter);
                        },
                        child: Icon(
                          Icons.notifications_active,
                          size: 52.w,
                        ),
                      ),
                      SizedBox(width: 28.w),
                      GestureDetector(
                        onTap: () {
                          Get.toNamed(Routes.deviceTips);
                        },
                        child: Icon(
                          Icons.add_circle_rounded,
                          size: 52.w,
                        ),
                      ),
                    ],
                  )
                ],
              ),
            ),
            //添加设备的提示
            Obx(
              () => Visibility(
                visible: logic.devices.isEmpty,
                child: Container(
                  width: Get.width,
                  height: 380.w,
                  margin: EdgeInsets.symmetric(horizontal: 35.w, vertical: 10.w),
                  decoration: BoxDecoration(
                    color: Config.colorBg2,
                    borderRadius: BorderRadius.circular(Config.roundBig.w),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Opacity(
                        opacity: 0.3,
                        child: Image.asset(Assets.imagesProduct01Mini, width: 100.w, height: 100.w),
                      ),
                      SizedBox(
                        height: 30.w,
                      ),
                      Text("你还没有绑定猫砂盆，快去绑定吧~",
                          style: TextStyle(
                              color: Config.colorText3, fontSize: Config.textSizeContent.sp)),
                    ],
                  ),
                ),
              ),
            ),
            //设备列表
            Obx(
              () => Expanded(
                child: Visibility(
                  visible: logic.devices.isNotEmpty,
                  child: GridView.builder(
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2, // 每行的列数
                      crossAxisSpacing: 25.w, // 列间距
                      mainAxisSpacing: 25.w, // 行间距
                      childAspectRatio: 0.94, // 子项宽高比
                    ),
                    itemCount: logic.devices.length,
                    padding: EdgeInsets.symmetric(horizontal: 35.w),
                    itemBuilder: (context, index) {
                      String typeStr = "";
                      Color typeColor = Colors.transparent;
                      switch (logic.devices[index]['type']) {
                        case 1:
                          typeStr = "设备正常";
                          typeColor = Config.colorMain;
                          break;
                        case 2:
                          typeStr = "设备离线";
                          typeColor = Config.colorText3.withOpacity(0.5);
                          break;
                        case 3:
                          typeStr = "集遍箱满";
                          typeColor = Colors.deepOrange.withOpacity(0.9);
                          break;
                      }

                      return InkWell(
                          onTap: () {
                            Get.toNamed(Routes.deviceDetail);
                          },
                          child: Container(
                            decoration: BoxDecoration(
                              color: Config.colorBg2,
                              borderRadius: BorderRadius.circular(Config.roundNormal.w),
                            ),
                            clipBehavior: Clip.antiAlias,
                            child: Stack(
                              children: [
                                Positioned(
                                    right: 0.w,
                                    bottom: 46.w,
                                    child: Opacity(
                                      opacity: 0.02,
                                      child: Image.asset(
                                        Assets.imagesPetWaterTag1,
                                        width: 130.w,
                                      ),
                                    )),
                                Positioned(
                                  left: 25.w,
                                  right: 25.w,
                                  top: 22.w,
                                  child: Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    children: [
                                      Row(
                                        children: [
                                          Image.asset(
                                            Assets.imagesProduct01Mini,
                                            width: 74.w,
                                          ),
                                          SizedBox(
                                            width: 15.w,
                                          ),
                                          Column(
                                            crossAxisAlignment: CrossAxisAlignment.start,
                                            children: [
                                              Text(
                                                '猫砂盆',
                                                style: TextStyle(
                                                    color: Config.colorText1,
                                                    fontSize: Config.textSizeContent.sp),
                                              ),
                                              SizedBox(height: 2.w),
                                              Container(
                                                decoration: BoxDecoration(
                                                  color: typeColor,
                                                  borderRadius: BorderRadius.circular(8.w),
                                                ),
                                                padding: EdgeInsets.symmetric(
                                                    horizontal: 6.w, vertical: 2.w),
                                                child: Text(
                                                  typeStr,
                                                  style: TextStyle(
                                                      color: Config.colorText1,
                                                      fontSize: 14.sp,
                                                      fontWeight: FontWeight.w600),
                                                ),
                                              ),
                                            ],
                                          ),
                                        ],
                                      ),
                                      SizedBox(
                                        height: 8.w,
                                      ),
                                      Text(
                                        '入厕',
                                        style: TextStyle(
                                            color: Config.colorText1,
                                            fontSize: Config.textSizeInfo.sp,
                                            fontWeight: FontWeight.w600),
                                      ),
                                      SizedBox(
                                        height: 6.w,
                                      ),
                                      Row(
                                        children: [
                                          Baseline(
                                            baseline: 30, // 设置基线高度
                                            baselineType: TextBaseline.alphabetic,
                                            child: Text(
                                              logic.devices[index]['count'].toString(),
                                              style: TextStyle(
                                                  color: typeColor,
                                                  fontSize: 60.sp,
                                                  fontWeight: FontWeight.bold),
                                            ),
                                          ),
                                          SizedBox(
                                            width: 10.w,
                                          ),
                                          Baseline(
                                            baseline: 20, // 设置基线高度
                                            baselineType: TextBaseline.alphabetic,
                                            child: Text(
                                              '次',
                                              style: TextStyle(
                                                  color: typeColor,
                                                  fontSize: Config.textSizeContent.sp),
                                            ),
                                          ),
                                        ],
                                      ),
                                      Text(
                                        '平均停留：15秒',
                                        style: TextStyle(
                                            color: Config.colorText1,
                                            fontSize: Config.textSizeContent.sp),
                                      ),
                                      SizedBox(
                                        height: 30.w,
                                      ),
                                      Container(
                                        alignment: Alignment.centerRight,
                                        child: Text(
                                          '昨天 16:30',
                                          style: TextStyle(
                                              color: Config.colorText3,
                                              fontSize: Config.textSizeInfo.sp),
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                                Visibility(
                                  visible: logic.devices[index]['type'] == 3,
                                  child: Positioned(
                                    left: 0,
                                    top: 0,
                                    right: 0,
                                    bottom: 0,
                                    child: Container(
                                      decoration: BoxDecoration(
                                        color: Config.colorText1.withOpacity(0.75),
                                        borderRadius: BorderRadius.circular(Config.roundNormal.w),
                                      ),
                                      child: Column(
                                        mainAxisAlignment: MainAxisAlignment.center,
                                        children: [
                                          Container(
                                            width: 90.w,
                                            height: 90.w,
                                            decoration: BoxDecoration(
                                                borderRadius: BorderRadius.circular(47.w),
                                                color: Config.colorBg),
                                            child: Icon(LineAwesomeIcons.exclamation_solid,
                                                size: 60.w, color: typeColor),
                                          ),
                                          SizedBox(height: 20.w),
                                          Container(
                                            decoration: BoxDecoration(
                                              color: Config.colorBg,
                                              borderRadius: BorderRadius.circular(6.w),
                                            ),
                                            padding: EdgeInsets.only(
                                                left: 6.w, right: 6.w, top: 3.w, bottom: 5.w),
                                            child: Text(
                                              '请及时清理集便箱',
                                              style: TextStyle(
                                                  color: Config.colorText1,
                                                  fontSize: 12.sp,
                                                  fontWeight: FontWeight.w600),
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ));
                    },
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  popFamilyManager() {
    Widget widget = Column(
      children: [
        Container(
          width: Get.width,
          margin: EdgeInsets.only(left: 35.w, right: 35.w, top: 110.w),
          decoration: BoxDecoration(
            color: Config.colorBg,
            borderRadius: BorderRadius.circular(Config.roundBig.w),
          ),
          clipBehavior: Clip.antiAlias,
          child: Column(
            children: [
              Obx(
                () => ListView.builder(
                    itemCount: logic.familyList.length,
                    shrinkWrap: true,
                    itemBuilder: (context, index) {
                      return Column(
                        children: [
                          menuItem(index, () {
                            logic.currentFamily.value = index;
                            Get.back();
                          }),
                          Visibility(
                            visible:
                                logic.familyList.length > 1 && index < logic.familyList.length - 1,
                            child: Container(
                              padding: EdgeInsets.symmetric(horizontal: 35.w),
                              child: CommonWidget.commonDivider(),
                            ),
                          ),
                        ],
                      );
                    }),
              ),
              InkWell(
                onTap: () {
                  Get.back();
                  Future.delayed(const Duration(milliseconds: 200), () {
                    Get.toNamed(Routes.familyManager);
                  });
                },
                child: Container(
                  padding: EdgeInsets.symmetric(horizontal: 35.w),
                  height: 114.w,
                  color: Config.colorBg2,
                  child: Row(
                    children: [
                      Text(
                        "家庭管理",
                        style: TextStyle(
                            color: Config.colorText1, fontSize: Config.textSizeSubTitle.sp),
                      ),
                      Expanded(
                          child: Container(
                        alignment: Alignment.centerRight,
                        child: Icon(
                          LineAwesomeIcons.user_cog_solid,
                          size: 46.w,
                          color: Config.colorText1,
                        ),
                      ))
                    ],
                  ),
                ),
              )
            ],
          ),
        )
      ],
    );
    Get.dialog(widget);
  }

  menuItem(int index, Function() onTap) {
    return InkWell(
      onTap: onTap,
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 35.w),
        height: 114.w,
        child: Row(
          children: [
            Text(
              "Sam${index + 1}的家庭",
              style: TextStyle(color: Config.colorText1, fontSize: Config.textSizeSubTitle.sp),
            ),
            Expanded(
              child: Obx(
                () => Container(
                  alignment: Alignment.centerRight,
                  child: Visibility(
                    visible: index == logic.currentFamily.value,
                    child: Icon(
                      Icons.check_rounded,
                      size: 46.w,
                      color: Config.colorText1,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
